<template>
  <a-card style="margin-top:-2px" :bordered="false">
    <div>
      <a-form>
        <a-row class="form-row">
          <a-col :span="6" :offset="1">
            <a-form-item label="考评名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入" v-model="queryParam.kpjhmc" />
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item label="单位类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select placeholder="请选择" v-model="queryParam.dwlx">
                <a-select-option value="1">机关</a-select-option>
                <a-select-option value="2">层级单位</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row">
          <a-col :span="6" :offset="1">
            <a-form-item label="考评开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker
                v-model="kssjs"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                :placeholder="['开始日期', '结束日期']"
                @change="onChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item label="考评结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker
                v-model="jssjs"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                :placeholder="['开始日期', '结束日期']"
                @change="onChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8" :offset="1">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchPlan">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetPlan">重置</a-button>
              <span style="float:right" class="table-page-search-submitButtons">
                <a-button type="primary" style="margin-left: 8px;float:right" @click="handleAdd()" >新增</a-button>
              </span>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table ref="stable" :columns="columns" :data="loadData">
      <span slot="action" slot-scope="text, record">
        <a @click="handleCate(record)" >制定考评项</a>
        <a-divider type="vertical" />
        <a v-if="record.zt == 2" @click="handleDelete('start',record)">启用</a>
        <a v-if="record.zt == 1" @click="handleDelete('start',record)">禁用</a>
        <a-divider type="vertical" />
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleDelete('delete',record)">删除</a>
      </span>
    </s-table>
    <plan-item ref="planItemModel" @success="refreshPlan"></plan-item>
    <par-exam-cate ref="examCateModel"></par-exam-cate>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { queryPlan, updatePlan } from '@/api/parExamPlan'
import PlanItem from '@/views/par/examPlan/PlanItem'
import ParExamCate from '@/views/par/examPlan/ParExamCate'
import moment from 'moment'
export default {
  name: 'Rolelist',
  components: {
    STable,
    // RoleAuth,
    PlanItem,
    ParExamCate
  },
  data () {
    return {
      // 编辑弹出框
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      editForm: this.$form.createForm(this),
      // 角色行信息
      mdl: {},
      // 查询参数
      queryParam: {},
      kssjs: [],
      jssjs: [],
      // 表头
      columns: [
        {
          title: '考评名称',
          dataIndex: 'kpjhmc',
          width: '200px',
          ellipsis: true
        },
        {
          title: '考评开始日期',
          dataIndex: 'kssj'
        },
        {
          title: '考评结束日期',
          dataIndex: 'jssj'
        },
        {
          title: '考评周期',
          dataIndex: 'kpzqName',
          ellipsis: true
        },
        {
          title: '单位类型',
          dataIndex: 'dwlx',
          customRender: function (text) {
            if (text === '1') {
              return '机关'
            } else {
              return '各层级单位'
            }
          }
        },
        {
          title: '检查方式',
          dataIndex: 'jcfs',
          customRender: function (text) {
            if (text === '1') {
              return '四不两直检查'
            } else {
              return '定期检查'
            }
          }
        },
        {
          title: '创建人',
          dataIndex: 'crtName'
        },
        {
          title: '创建时间',
          dataIndex: 'crtTime',
          ellipsis: true
        },
        { title: '操作', width: '260px', dataIndex: 'action', scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return queryPlan(parameter, { scbj: '0' }).then(res => {
          return res.result
        })
      }
    }
  },
  methods: {
    /**
     * CheckBox选择事件
     * 多选框绑定值修改时对应调整this.mdl内容
     * 用于向后台传递数据
     * 这里用中间值tempSelected绑定多选框，是为了解决无法多选框无法点击的问题
     */
    onChange (value, dateString) {
    },
    /**
     * 权限分配弹出框
     */
    handleDelete (flag, record) {
      let param = {}
      if (flag === 'delete') {
        param = { id: record.id, scbj: '1' }
      } else if (flag === 'start') {
        param = { id: record.id, zt: record.zt === '1' ? '2' : '1' }
      }
      const _this = this
      this.$confirm({
        title: '提示',
        content: flag === 'delete' ? '是否删除?' : ('是否' + (record.zt === '1' ? '禁用' : '启用')),
        onOk () {
          return updatePlan(param)
            .then(res => {
              if (res.status === 200) {
                _this.$notification['success']({
                  message: '操作成功',
                  duration: 2
                })
                // 关闭编辑框
                _this.editVisible = false
                // 刷新列表
                // this.$refs.stable.refresh(true)
                _this.$refs.stable.refresh(true)
              } else {
                _this.$notification['error']({
                  message: res.message,
                  duration: 4
                })
              }
            })
            .catch(() =>
              this.$notification['error']({
                message: '出现异常，请联系系统管理员',
                duration: 4
              })
            )
            .finally(() => {
              // this.confirmLoading = false
            })
        },
        onCancel () {}
      })
    },
    /**
     * 搜索
     */
    searchPlan () {
      if (this.kssjs !== [] && this.kssjs.length !== 0) {
        this.queryParam.kssjStart = moment(this.kssjs[0]).format('YYYY-MM-DD')
        this.queryParam.kssjEnd = moment(this.kssjs[1]).format('YYYY-MM-DD')
      }
      if (this.jssjs !== [] && this.jssjs.length !== 0) {
        this.queryParam.jssjStart = moment(this.jssjs[0]).format('YYYY-MM-DD')
        this.queryParam.jssjEnd = moment(this.jssjs[1]).format('YYYY-MM-DD')
      }
      this.$refs.stable.loadData({}, this.queryParam, {})
    },
    resetPlan () {
      this.queryParam = {}
      this.jssjs = []
      this.kssjs = []
    },
    /**
     * 编辑弹出框
     */
    handleEdit (record) {
      this.mdl = Object.assign({}, record)
      this.mdl.inOrUp = 'update'
      this.$refs.planItemModel.begin(this.mdl, 'org')
    },
    /**
     * 新增弹出框
     */
    handleAdd () {
      this.mdl.inOrUp = 'insert'
      this.$refs.planItemModel.begin(this.mdl, 'org')
    },
    /**
     * 编辑弹出框
     */
    handleCate (record) {
      this.mdl = Object.assign({}, record)
      this.$refs.examCateModel.begin(this.mdl, 'org')
    },
    /**
     * 列表刷新
     */
    refreshPlan () {
      this.$refs.stable.refresh(true)
    }
  }
}
</script>
<style scoped>

</style>
